<template>
    <div class="hot">
        <div class="hot-bg">
            <div class="hot-logo">
                <span class="day"> 更新日期:&nbsp;{{ updateTime | formatdate("MM月dd日") }} </span>
            </div>
        </div>
        <music-list
            v-if="showlist.length > 0"
            :musiclist="showlist"
            :shownum="true"
            @play="$emit('play', $event)"
            @isfull="isfull = $event"
        ></music-list>
        <load-animate v-else></load-animate>
        <div class="loadmore" ref="loadmore">
            {{ page >= 10 ? "到底了" : "" }}
        </div>
    </div>
</template>

<script>
import MusicList from "../components/MusicList.vue";
export default {
    props: {},
    components: { MusicList },
    data() {
        return {
            hotlist: [],
            updateTime: null,
            page: 1,
            isplay: true,
        };
    },
    created() {
        this.gethostlist();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    methods: {
        async gethostlist() {
            await this.axios.get("playlist/detail?id=3778678").then((res) => {
                this.updateTime = res.playlist.updateTime;
                this.hotlist = res.playlist.tracks.map((item, index) => {
                    item.song = {
                        alias: item.alia,
                        privilege: res.privileges[index],
                        artists: item.ar,
                        album: item.al,
                    };
                    return item;
                });
            });
        },
        windowScroll() {
            //滚动卷去的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // loadmore 距离顶部距离
            let loadmoreoffsetTop = this.$refs.loadmore.offsetTop;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            //触底加载下一页
            if (scrollTop + clientHeight >= loadmoreoffsetTop + 39) {
                this.page++;
            }
        },
    },
    computed: {
        showlist() {
            let end = 20 * this.page;
            return this.hotlist.slice(0, end);
        },
    },
    //销毁组件 移除滚动事件
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    //离开路由 移除滚动事件
    beforeRouterleave(to, from, next) {
        window.removeEventListener("scroll", this.windowScroll);
        next();
    },
};
</script>

<style lang="scss" scoped>
.hot {
    position: relative;
    top: 40px;
    .hot-bg {
        position: relative;
        width: 100vw;
        height: 38.666vw;
        background: url(../assets/images/hot_bg.jpg) no-repeat;
        background-size: contain;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.2);
        }
        .hot-logo {
            display: flex;
            width: 142px;
            height: 105px;
            background: url(../assets/images/icon.png) no-repeat;
            background-size: 166px 97px;
            background-position: -24px -30px;
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            z-index: 2;
            .day {
                font-size: 12px;
                color: #fff;
                opacity: 0.8;
                position: absolute;
                bottom: 7px;
            }
        }
    }
    .loadmore {
        text-align: center;
    }
}
</style>
